<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="box">演示dom操作</button>
    <button class="del">替换</button>


</body>
<script>
    const btn = document.querySelector('.box')
    const del = document.querySelector('.del')

    del.addEventListener('click', function() {
        //  document.body.removeChild(btn)
        const div = document.createElement('div')
        div.textContent = '我是替换的新节点'
        document.body.replaceChild(div, btn)
    }, false)

    btn.addEventListener('click', function() {

        //克隆节点
        const btnCopy = btn.cloneNode()
        btnCopy.textContent = '我是复制按钮'
            // document.body.appendChild(btnCopy)
        document.body.insertBefore(btnCopy, btn)


        //创建dom对象div
        // const img = document.createElement('img')
        // const div = document.createElement('div')

        // div.innerHTML = '我是新创建的div'
        // const txt = document.createTextNode('我是新创建的div111111')
        // div.appendChild(txt)

        //img添加src路径
        //img.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'

        //将img对象追加到body末尾
        // document.body.appendChild(img)
        // document.body.appendChild(div)



    }, false)
</script>

</html>